<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网易邮箱注册</title>
<style>
   body{
   	width: 900px;
   	margin: 0 auto;
   	font-size: 15px;
    color: #555;
   }
   .header{
   	display: block;
   	width: 920px;
   }
   .head{
   	    color: #039;
   	    font-size: 12px;
        /*text-align: right;*/
        display: block;
        position:absolute;
        margin-left: 800px;
        top: 25px;
   }
    .outermost{
    	border-radius: 10px;
    	width: 920px;
    	height: 900px;
    	border: 1px solid gray;
    	margin: 0 auto;
    	margin-top: 20px;

    }
    .h1-1{
         background-color: #5b8abb;
         margin-top: -9px;
         border-radius: 5 5 0 0px;
    }
    h1{
    	 font-size: 14px;
         line-height: 36px;
         color: #FFF;
         margin-left: 20px;
         /*text-align: left;*/
         
    }
    .logon-mode{
    	height: 35px;
        display: block;
        margin-top:50px;
        margin-left: 40px;
    }
    .logon-mode li{
    	list-style: none;
    	border: 1px solid #555;
    	width: 150px;
    	float: left;
    	text-align: center;
    	line-height: 35px;
    	font-size: 14px;
    }
    .img-1{
      position: absolute;
      top: 115px;
      padding-left: 585px;
    }
  .content{
    width: 500px;
    padding-left: 80px;
  }
  .into{
    padding-top: 25px;
  }

  .left{
    width: 150px;
    text-align: right; 
  }
  .right{
    width: 300px;
    height: 25px;
    border:#ABABAB 1px solid;
    border-radius: 5px;

  }
  select{
    width: 100px;
    border:1px solid #999;
  }
  
  .txt-tips{
    color: #999;
    font-size: 12px;
    padding-left: 80px;
    list-style: none;
  }
  .img2{
    display: block;
    position: absolute;
    padding-left:280px;
    top:545px;
  }
  input{

    vertical-align: middle;
  }
  .btn{
    width: 140px;
    height: 35px;
    font-size: 15px;
    color: #4A4949;
    background-color: #FAF3F3;
    text-align: center;
    border-bottom-radius:5px; 
    margin-left: 80px;

  }
   .footer{
    margin-top:25px;
    margin-left: 200px;
   }

   
</style>

</head>
<body>
<div class="header">
<img src="img/1.png"/>
  <p class="head">了解更多|意见反馈</p>
</div>
<div class="outermost">
<div class="h1-1">
 <h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1></div>
 <div class="img-1">
    <img src="img/3.png" alt="">
 </div>
 
   <ul class="logon-mode">
        <li style="background-color:#039;color:white;">注册字母邮箱</li>
        <li>注册手机号码邮箱</li>
        <li>注册VIP邮箱</li>

   </ul>
   <div class="content">
     <ul class="into">
        <td class="left">*邮箱地址 </td>
        <td><input type="text" class="right" style="width:170px;">
         <select>
              <option>163.com</option>
              <option>126.com</option>
              <option>yeah.net</option>

        </select><br/>
        </td>
        <li class="txt-tips"> 6~18个字符，可使用字母、数字、下划线，需以字母开头</li>
     </ul>
     <ul class="into">
          <td class="left">*密&nbsp码&nbsp</td>
          <td><input type="text" class="right"></td>
          <li class="txt-tips">6~16个字符，区分大小写</li>
     </ul>
     <ul class="into">
        <td class="left">*确认密码 </td>
          <td><input type="text" class="right"></td>
           <li class="txt-tips">请再次填写密码</li>
     </ul>
     <ul class="into">
        <td class="left">*手机号码 </td>
          <td><input type="text" class="right" value="+86-"></td>
          <li class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</li>
     </ul>
     <ul class="into">
        <td class="left">*验证码&nbsp </td>
          <td><input type="text" class="right" style="width:190px;"></td>
          <img src="img/2.jpg" class="img2">
        <li class="txt-tips">请填写图片中的字符，不区分大小写 <a href="" style="text-decoration:none;">看不清楚？换张图片</a></li>
     </ul>
      <ul class="into">
         <button class="btn">
                 <strong>免费获取验证码</strong>
         </button>


      </ul>
      <ul class="into">
        <td class="left">*短信验证码 </td>
          <td><input type="text" class="right"></td>
          <li class="txt-tips">&nbsp请查收手机短信，并填写短信中的验证码</li>
     </ul>
   </div>
   <div class="footer">
    <input type="checkbox" checked="checked">同意<a href="#" style="text-decoration:none;font-size:12px;">"服务条款"</a>和<a href="#" style="text-decoration:none;font-size:12px;">"隐私权相关政策"</a>
  </div>
     
     <button style="background-color:#5DB348;font-size:14px;color:#fff;margin-top:25px;width:119px;height: 37px;margin-left:200px;">立即注册</button>
     
</div>

	
</body>
</html>